<script lang="ts" setup>
    import {reactive, ref,type Component,computed} from "vue";
    // useRouter 函数能让你在 setup 函数或者 <script setup> 语法糖中获取到当前的路由实例
    import {useRoute,useRouter} from "vue-router";
    import {productDetails} from '@/components/shop/productDetails';
    const route = useRoute();
    console.log(route);
    function routerFn(){

    }

    //使用了计算属性
    const currentProduct = computed(() => {
      // 从路由参数中获取id（路由参数是字符串类型，需要转为数字）
      const productId = Number(route.params.id);
      // 从productDetails中找到匹配的商品
      return productDetails.find(item => item.id === productId);
    });

    // 将商品信息转换为表格需要的格式（属性-值对）
const detailList = computed(() => {
  if (!currentProduct.value) return [];
  return [
    { key: '商品名称', value: currentProduct.value.name },
    { key: '商品编号', value: currentProduct.value.id },
    { key: '商品描述', value: currentProduct.value.info }
  ];
});
</script>

<template>
  <!-- <div v-if="currentProduct">
    <h1>名称: {{ currentProduct.name }}</h1>
    <h2>编号: {{ currentProduct.id }}</h2>
    <h2>信息: {{ currentProduct.info }}</h2>
  </div> -->
  <el-card shadow="always" style="margin: 20px; max-width: 600px;">
    <template #header>
      <div style="font-size: 18px; font-weight: bold;">商品详情</div>
    </template>

    <!-- 使用 el-table 展示详细信息 -->
    <el-table 
      :data="detailList" 
      border 
      style="width: 100%; margin-top: 15px;"
      :header-cell-style="{ background: '#f5f7fa', fontWeight: 'bold' }"
    >
      <el-table-column prop="key" label="属性" width="120" align="center" />
      <el-table-column prop="value" label="值" align="left" />
    </el-table>
  </el-card>
</template>
  
<style scoped>

</style>